<template>
  <div id="MusicList">
    <el-table
      :data="musicAlbum"
      height="100vh"
      style="width: 100%;background-color: var(--theme-bgColor-aside-nav)">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table :data="scope.row.children" style="width: calc(100% - 47px)">
            <el-table-column prop="musicName" label="歌名"></el-table-column>
            <el-table-column prop="musicNameEn" label="英文名"></el-table-column>
            <el-table-column prop="musicGen" label="类型"></el-table-column>
            <el-table-column prop="musicFollower" label="关注人数"></el-table-column>
            <el-table-column
              fixed="right"
              label="操作">
              <template slot-scope="scope">
                <el-button @click="updateMusic(scope.row)" type="text" size="small">修改</el-button>
                <el-button @click="deleteMusic_(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column id="index" type="index" :index="getAlbumMusic"></el-table-column>
      <el-table-column prop="albumId" label="专辑ID" width="170"></el-table-column>
      <el-table-column prop="albumImg" label="专辑封面" width="170">
        <template slot-scope="scope">
          <el-popover placement="top-start" title="" trigger="hover">
            <img :src="scope.row.albumImg" alt="" style="width: 170px;height: 170px">
            <img slot="reference" :src="scope.row.albumImg" style="width: 35px;height: 35px">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="专辑名" prop="albumName"></el-table-column>
      <el-table-column prop="musicArt" label="歌手"></el-table-column>
      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button @click="updateMusicAlbum(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="deleteMusicAlbum_(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <update-info class="updateBox updateInfo" :musicAlbumInfo="musicAlbumInfo"/>
    <update-music class="updateInfo_" :musicInfo="musicInfo" />
  </div>
</template>
<script>
  import api from "../../model/api";
  import updateInfo from "./updateInfo";
  import updateMusic from "./updateMusic";
  import $ from "jquery";

  export default {
    data() {
      return {
        musicAlbum:[],
        musicInfo:{},
        musicAlbumInfo:{},
      }
    },
    components:{
      updateInfo,
      updateMusic,
    },
    created() {
      this.getAlbum()
    },
    methods: {
      getAlbum(){
        api.getMusicAlbum().then(res =>{
          this.musicAlbum = res.data
        })
      },
      async getAlbumMusic(index){
        const {data:_res} = await this.$axios.post('v1/getAlbumAllMusic',{albumId:this.musicAlbum[index].albumId})
        this.musicAlbum[index].children = _res.data
      },
      // test(val){
      //   console.log(val)
      // },
      tableRowStyle({ row, rowIndex }) {
        return 'background-color: #F7F6Fd;'
      },
      // 修改table header的背景色
      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background-color: lightblue;color: #303133;font-weight: 500;font-size: 20px;' //font-size: 20px;为字体大小设置
        }
      },
      updateMusic(val){
        this.musicInfo = val
        $('._updateInfo').css('display','block')
      },
      async deleteMusic_(val,index){
        this.$confirm('是否删除该单曲?', '谨慎操作', {confirmButtonText: '确定',cancelButtonText: '取消', type: 'warning'}).then(()=>{
          this.deleteMusic(val)
          console.log(index)
        }).catch(()=>{
        })
      },
      async deleteMusic(data){
        const {data:res} = await this.$axios.post('v1/deleteMusic',{musicId:data.musicId})
        if(res.code === 200){
          this.$message.success('删除成功')
        }
      },
      updateMusicAlbum(val){
        this.musicAlbumInfo = val
        $('.updateInfo').css('display','block')
      },
      async deleteMusicAlbum_(val){
        this.$confirm('是否删除该专辑及包含但所有单曲?', '谨慎操作', {confirmButtonText: '确定',cancelButtonText: '取消', type: 'warning'}).then(()=>{
          this.deleteMusicAlbum(val.albumId)
        }).catch(()=>{
        })
      },
      deleteMusicAlbum(albumId){
        console.log(albumId)
      },

    },
  }
</script>

<style lang="less" scoped>
  #MusicList{
    width: 100%;
  }


</style>
